<template>
	<view class="wrapper goods goods-safe">
		<u-loading-page :loading="pageLoading"></u-loading-page>
		<!--轮播图-->
		<swiper
			circular
			class="swiper"
			indicator-active-color="#e3230e"
			indicator-dots
			autoplay>
			<swiper-item v-for="item in bannerList" :key="item">
				<view class="swiper-item">
					<image class="swiper-item-img" mode="aspectFill" :src="imgUrl(item)"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="goods-content" v-if="info.id">
			<view class="goods-box">
				<view class="goods-info">
					<view class="goods-info-item main-flex">
						<view class="goods-info-price">
							<text>￥</text>
							<text class="goods-info-price-num">{{info?.sellPrice ? moneyStr(info?.sellPrice) : '0.00'}}</text>
							<text class="goods-info-old">￥{{info?.marketPrice ? moneyStr(info?.marketPrice) : '0.00'}}元</text>
						</view>
						<view class="goods-info-sales">销量{{info?.salesNumber || 0}}</view>
					</view>
					<view class="goods-info-coupon main-flex" v-if="couponProductList.length > 0">
						<view class="goods-info-coupon-list main-flex-item main-flex">
							<view class="goods-info-coupon-item" v-for="item in couponProductList" :key="item.id">
								{{item.name}}
							</view>
						</view>
						<view class="goods-info-coupon-btn" @click="openConpon">领券</view>
					</view>
					<view class="goods-info-item goods-info-c main-flex">
						<view class="goods-info-name main-flex-item">{{info.name}}</view>
						<!--#ifdef MP-WEIXIN-->
						<view class="goods-info-share">
							<image class="goods-info-share-icon" src="/static/images/share.png"></image>
							<button open-type="share" class="goods-info-share-btn">分享</button>
						</view>
						<!--#endif-->
						<!--#ifndef MP-WEIXIN-->
						<view class="goods-info-share" @click="goShare">
							<image class="goods-info-share-icon" src="/static/images/share.png"></image>
						</view>
						<!--#endif-->
					</view>
					<view class="goods-info-item goods-info-desc">{{info.marketTitle}}</view>
				</view>
			</view>
			
			<view class="goods-box goods-other">
				<view class="goods-other-item main-flex">
					<view class="goods-other-item-name">运费</view>
					<view class="goods-other-item-text">
						订单满
						<text class="price">￥{{setStore?.sys?.free_freight?moneyStr(setStore?.sys?.free_freight):'0.00'}}</text>
						包邮
					</view>
				</view>
			</view>
			
			<view class="goods-box goods-detail">
				<view class="goods-detail-title">商品详情</view>
				<view class="goods-detail-content" v-if="detail">
					<!-- <u-parse :content="detail"></u-parse> -->
					<mp-html :content="detail" />
				</view>
			</view>
			
		</view>
		<!--菜单-->
		<view class="goods-menu safe-area">
			<view class="goods-menu-box main-flex">
				<goods-nav class="goods-menu-nav" :fill="true" :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
			</view>
		</view>
		
		<u-back-top :scroll-top="scrollTop">
			<view class="back-top main-flex" @click="backTop">
				<uni-icons type="arrow-up" size="30" color="#ffffff"></uni-icons>
			</view>
		</u-back-top>
		<goods-conpon
			:showConpon="showConpon"
			:couponProductList="couponProductList"
			@receive="receiveConpon"
			@close="closeConpon"></goods-conpon>
		<u-popup
			mode="bottom"
			closeable
			zIndex="99"
			:show="showGoods"
			@close="closeGoods">
			<view class="goods-popup">
				<view class="goods-popup-title main-flex">立即购买</view>
				<view class="goods-popup-content main-flex">
					<view class="goods-popup-content-top">
						<view class="goods-popup-info main-flex">
							<view class="goods-popup-img">
								<image class="goods-popup-img-url" mode="aspectFill" :src="imgUrl(info.image)"></image>
							</view>
							<view class="goods-popup-info-r main-flex-item">
								<view class="goods-popup-name">{{info.name}}</view>
								<view class="goods-popup-price">￥{{moneyStr(info.sellPrice)}}/{{info.unit}}</view>
							</view>
						</view>
						<view class="goods-popup-specs">
							<view class="goods-popup-specs-title">规格</view>
							<view class="goods-popup-specs-box">
								<view class="suk main-flex">
									<view class="suk-item">
										<uni-tag text="标签" type="default" inverted />
									</view>
									<view class="suk-item">
										<uni-tag text="标签" type="default" inverted />
									</view>
								</view>
							</view>
						</view>
						<view class="goods-popup-count main-flex">
							<view class="goods-popup-count-title">购买数量</view>
							<view class="goods-popup-count-box">
								<u-number-box
									bgColor="#e3230e"
									integer
									inputWidth="50"
									v-model="productNumber">
									<template v-slot:minus>
										<view class="minus">
											<uni-icons type="minus-filled" size="28" color="#cccccc"></uni-icons>
										</view>
									</template>
									<template v-slot:plus>
										<view class="plus">
											<uni-icons type="plus-filled" size="28" color="#e3230e"></uni-icons>
										</view>
									</template>
								</u-number-box>
							</view>
						</view>
					</view>
					<button
						:disabled="isSubmit"
						:loading="isSubmit"
						class="ty-button ty-button-confirm goods-popup-btn"
						@click="clickGoods">{{isType === 1 ? '立即购买' : '加入购物车'}}</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide, onPageScroll, onShareAppMessage } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import useOrderStore from '@/store/modules/order'
import { 
	productInfo,
	productDetail,
	productCommentList,
	productCollectionCollected,
	productCollectionAdd } from "@/api/app_api/product"
import { delCollection } from "@/api/app_api/user"
import { customerCarAdd } from "@/api/app_api/car"
import { couponProduct } from "@/api/app_api/coupon"
import { calculatProductList } from "@/api/app_api/order"
import { shareWeixin, serviceWeixin} from '@/utils/ty.js'
import { getMpLogin } from '@/utils/login.js'
import modal from '@/plugins/modal'

	const userStore = useUserStore()
	const setStore = useSetStore()
	const orderStore = useOrderStore()
	
	const id = ref('')
	onLoad((option) => {
		if (option.isTc) {
			setStore.isTc = Number(option.isTc)
		}
		if (option.id) {
			id.value = option.id
			getInfo()
			getDetail()
			getCouponProduct()
			pageNum.value = 1
			total.value = 0
			isNull.value = false
			getProductCommentList()
			getProductCollectionCollected()
		}
	})
	
	// 商品信息
	const info = ref({})
	const pageLoading = ref(true)
	const getInfo = () => {
		// uni.showLoading({
		// 	title: '商品信息查询中...'
		// })
		productInfo({
			productId: id.value,
			sellChannel: userStore.sellChannel
		}).then(res => {
			// uni.hideLoading()
			if (res.data) {
				pageLoading.value = false
				info.value = res.data
			} else {
				detailNull()
			}
		}).catch(err => {
			// uni.hideLoading()
			detailNull()
		})
	}
	const detailNull = () => {
		uni.showModal({
			title: '提示',
			content: '商品失效',
			success: function (res) {
				if (res.confirm) {
					uni.navigateBack({
						delta: 1
					})
				} else if (res.cancel) {
				}
			}
		})
	}
	const bannerList = computed(() => {
		return info.value?.banner ? info.value.banner.split(',').filter(item => item) : []
	})
	// 商品评价
	const commentList = ref([])
	const isLoading = ref(false)
	const status = ref('more')
	const isNull = ref(false)
	const pageNum = ref(1)
	const pageSize = ref(10)
	const total = ref(0)
	const getProductCommentList = () => {
		const params = {
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			isAsc: 'desc',
			productId: id.value
		}
		isLoading.value = true
		productCommentList(params).then(res => {
			commentList.value = commentList.value.concat(res.data || [])
			status.value = res.data.length === pageSize.value ? 'loading' : 'no-more'
			total.value = res.allNumber
			isNull.value = res.allNumber === 0 && pageNum.value === 1
			isLoading.value = false
		}).catch(() => {
			isLoading.value = false
			isNull.value = false
		})
	}
	// 触底查询
	onReachBottom(() => {
		if(status.value == 'no-more') return false;
		pageNum.value += 1
		status.value = 'loading'
		getProductCommentList()
	})
	
	// 商品详情
	const detail = ref('')
	const getDetail = () => {
		productDetail({
			productId: id.value
		}).then(res => {
			if (res.msg) {
				detail.value = res.msg
			}
		})
	}
	
	// 商品优惠券
	const couponProductList = ref([])
	const getCouponProduct = () => {
		couponProduct({
			productId: id.value
		}).then(res => {
			couponProductList.value = res.data
		})
	}
	// 打开优惠券
	const showConpon = ref(false)
	const openConpon = () => {
		if (!getMpLogin()) {
			return false
		}
		showConpon.value = true
	}
	const closeConpon = () => {
		showConpon.value = false
	}
	const receiveConpon = () => {
		getCouponProduct()
	}
	
	// 返回顶部
	const scrollTop = ref(0)
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop
	})
	const backTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 100
		});
	}
	
	// 底部
	const options = ref([{
			icon: 'headphones',
			text: '客服'
		}, {
			icon: 'star',
			text: '收藏'
		}, {
			icon: 'cart',
			text: '购物车'
		}])
	const buttonGroup = ref([{
			text: '加入购物车',
			backgroundColor: '#e3230e',
			color: '#fff'
		},
		{
			text: '立即购买',
			backgroundColor: '#ffa200',
			color: '#fff'
		}
		])
	const onClick = (e) => {
		// console.log(e)
		if (!getMpLogin()) {
			return false
		}
		if (e.index === 0) { // 客服
			serviceWeixin()
		} else if (e.index === 1) { // 收藏
			if (isCollected.value) {
				delCollectionFun()
			} else {
				productCollectionAddFun()
			}
		} else if (e.index === 2) { // 购物车
			uni.switchTab({
				url: '/pages/car/car'
			})
		}
	}
	
	// 商品收藏
	const isCollected = ref(false)
	const getProductCollectionCollected = () => {
		productCollectionCollected({
			productId: id.value
		}).then(res => {
			isCollected.value = res?.data || 0
			if (isCollected.value)
			options.value[1] = {
				icon: isCollected.value ? 'star-filled' : 'star',
				color: isCollected.value ? '#e3230e' : '#646566',
				text: '收藏'
			}
		})
	}
	// 收藏
	const productCollectionAddFun = () => {
		productCollectionAdd({
			productId: id.value
		}).then(res => {
			isCollected.value = true
			getProductCollectionCollected()
		})
	}
	// 取消收藏
	const delCollectionFun = () => {
		delCollection({
			productId: id.value
		}).then(res => {
			isCollected.value = false
			getProductCollectionCollected()
		})
	}
	
	const isSubmit = ref(false)
	const productNumber = ref(1)
	const isType = ref(0)
	const buttonClick = (e) => {
		if (!getMpLogin()) {
			return false
		}
		showGoods.value = true
		isType.value = e.index
	}
	
	const showGoods = ref(false)
	const closeGoods = () => {
		isType.value = 0
		productNumber.value = 1
		showGoods.value = false
	}
	const clickGoods = () => {
		if (isType.value === 1) {
			getMoney([{
				moreSpec: info.value.moreSpec,
				number: productNumber.value,
				price: info.value.sellPrice,
				productId: info.value.id,
				productImg: info.value.image,
				productName: info.value.name,
				productSpecId: null,
				productSpecName: null,
				productUnit: info.unit,
				sellChannel: userStore.sellChannel
			}])
		} else {
			const params = {
				moreSpec: info.value.moreSpec,
				productId: info.value.id,
				productImg: info.value.image,
				productName: info.value.name,
				productNumber: productNumber.value,
				productPrice: info.value.sellPrice,
				regionCode: info.value.regionCode,
				sellChannel: userStore.sellChannel
			}
			if (isSubmit.value) return false
			isSubmit.value = true
			customerCarAdd(params).then(res => {
				uni.$u.toast('已加入购物车')
				isSubmit.value = false
				closeGoods()
			}).catch(err => {
				isSubmit.value = false
			})
		}
	}
	
	// 计算价格
	const getMoney = (list) => {
		if (isSubmit.value) return false
		isSubmit.value = true
		calculatProductList(list, userStore.sellChannel).then(res => {
			isSubmit.value = false
			if (res?.data) {
				orderStore.setGoods(res.data)
				uni.navigateTo({
					url: '/pages/order/confirm'
				})
				closeGoods()
			}
		}).catch(err => {
			isSubmit.value = false
		})
	}
	
	watch(() => userStore.sellChannel, (nval, oval) => {
		if (nval) {
			getInfo()
		}
	})
	
	// 分享
	const goShare = () => {
		console.log('分享')
		// #ifndef MP-WEIXIN
		const	shareUrl = `${setStore.baseUrl}/#/pages/goods/goodsDetail/goodsDetail?id=${id.value}`
		shareWeixin({
			shareUrl,
			title: info.value?.name,
			content: info.value?.name,
			img: info.value?.image
		})
		// #endif
	}
	// #ifdef MP-WEIXIN
	onShareAppMessage(() => {
		return {
			title: info.value?.name,
			path: `/pages/goods/index?id=${id.value}&isTc=${userStore.isTc}`,
			imageUrl: info.value?.image
		}
	})
	// #endif
	
</script>

<style lang="scss" scoped>
	.goods {
		&-safe {
			padding-bottom: calc(constant(safe-area-inset-bottom) + 60px); /* 兼容iOS <11.2 */
			padding-bottom: calc(env(safe-area-inset-bottom) + 60px); /* 兼容iOS ≥11.2 */
		}
		.swiper {
			width: 100%;
			height: 100vw;
			&-item {
				width: 100%;
				height: 100vw;
				&-img {
					width: 100%;
					height: 100vw;
				}
			}
		}
		&-content {
			padding: 0rpx 20rpx;
		}
		&-box {
			border-radius: 20rpx;
			overflow: hidden;
			background-color: #ffffff;
			margin-top: 20rpx;
		}
		&-info {
			padding: 20rpx 0;
			&-item {
				padding: 0 20rpx;
			}
			&-price {
				font-size: 36rpx;
				color: $primary-color;
				font-weight: 600;
				&-num {
					font-size: 48rpx;
				}
			}
			&-old {
				font-size: 24rpx;
				font-weight: normal;
				color: $text-light;
				text-decoration: line-through;
				margin-left: 10rpx;
			}
			&-sales {
				margin-left: auto;
				font-size: 24rpx;
				color: $text-light;
			}
			&-coupon {
				padding: 4rpx 0rpx 4rpx 20rpx ;
				align-items: flex-start;
				&-list {
					flex-wrap: wrap;
				}
				&-item {
					height: 40rpx;
					padding: 0rpx 8rpx;
					border-radius: 4rpx;
					background-color: rgba(227, 35, 14, .1);
					color: $primary-color;
					font-size: 20rpx;
					margin: 6rpx 10rpx 6rpx 0rpx;
					line-height: 40rpx;
				}
				&-btn {
					width: 100rpx;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 24rpx;
					text-align: center;
					background-color: $primary-color;
					color: #ffffff;
					border-radius: 20rpx 0rpx 0rpx 20rpx;
					margin-top: 6rpx;
				}
			}
			&-c {
				align-items: flex-start;
			}
			&-name {
				font-size: 32rpx;
				line-height: 56rpx;
				font-weight: 600;
			}
			&-share {
				position: relative;
				margin-left: 30rpx;
				margin-top: 4rpx;
				font-size: 0;
				&-icon {
					width: 48rpx;
					height: 48rpx;
				}
				&-btn {
					position: absolute;
					width: 48rpx;
					height: 48rpx;
					top: 0;
					left: 0;
					opacity: 0;
					z-index: 1;
					padding: 0;
					margin: 0;
					font-size: 20rpx;
				}
			}
			&-desc {
				font-size: 24rpx;
				color: $text-light;
				margin-top: 10rpx;
			}
		}
		&-menu {
			position: fixed;
			width: 100%;
			left: 0;
			bottom: 0;
			background-color: #ffffff;
			box-sizing: border-box;
			&-box {
				width: 100%;
			}
			&-nav {
				width: 100%;
			}
		}
		&-other {
			padding: 20rpx;
			&-item {
				min-height: 40rpx;
				font-size: 26rpx;
				&-name {
					color: $text-light;
				}
				&-text {
					margin-left: 20rpx;
				}
			}
		}
		&-detail {
			padding: 20rpx;
			&-title {
				position: relative;
				padding-left: 20rpx;
				font-size: 28rpx;
				&::after {
					content: '';
					width: 8rpx;
					height: 28rpx;
					background-color: red;
					position: absolute;
					top: 50%;
					left: 0rpx;
					margin-top: -14rpx;
					border-radius: 4rpx;
				}
			}
			&-content {
				margin-top: 20rpx;
			}
		}
		&-popup {
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			background-color: #ffffff;
			&-title {
				height: 48px;
				font-size: 16px;
				font-weight: 600;
				text-align: center;
				justify-content: center;
				padding: 0 15px;
			}
			&-content {
				height: 600rpx;
				padding: 0 15px;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				&-top {
					width: 100%;
				}
			}
			&-info {
				align-items: flex-start;
				margin-top: 20rpx;
				&-r {
					padding-left: 20rpx;
				}
			}
			&-img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
				overflow: hidden;
				&-url {
					width: 160rpx;
					height: 160rpx;
				}
			}
			&-name {
				font-size: 28rpx;
				font-weight: 600;
			}
			&-price {
				font-size: 24rpx;
				margin-top: 20rpx;
				font-weight: 600;
				color: $price-color;
			}
			&-specs {
				margin-top: 20rpx;
				&-title {
					font-size: 28rpx;
				}
				&-box {
				}
			}
			&-count {
				margin-top: 20rpx;
				&-title {
					font-size: 28rpx;
				}
				&-box {
					margin-left: auto;
				}
			}
			&-btn {
				width: 100%;
				height: 68rpx;
				margin: 0;
				margin-bottom: 40rpx;
				padding: 0;
				font-size: 28rpx;
				justify-content: center;
				border-radius: 100rpx;
			}
		}
	}
	.back-top {
		width: 100%;
		height: 100%;
		background-color: rgb(0, 0, 0, .5);
		justify-content: center;
		border-radius: 50%;
	}
	.suk {
		flex-wrap: wrap;
		&-item {
			margin-right: 20rpx;
			margin-top: 20rpx;
			// padding: 10rpx 20rpx;
			// border: 2rpx solid #eee;
			// border-radius: 10rpx;
			// font-size: 26rpx;
			// color: #333;
			// &-active {
			// 	border-color: #fa3534;
			// 	color: #fa3534;
			// }
			// &-disabled {
			// 	color: #ccc;
			// 	border-color: #eee;
			// }
		}
	}
</style>
